/*
 * @Description:
 * @Author: Rfan
 * @Date: 2022-07-05 15:32:00
 * @LastEditTime: 2022-07-05 16:07:32
 */

import { useMemo, useState } from 'react';
import { Button, Form, Input, Space } from 'antd';
import ExpGeneratorDialog, { TScopeType } from '@/components/ExpGeneratorDialog';

const DataForm = () => {
  const form = Form.useFormInstance();

  // 添加规则弹窗状态
  const [addRuleVisible, setAddRuleVisible] = useState(false);
  // 传入ExpGeneratorDialog的范围参数
  const [scope] = useState<TScopeType>({
    atCode: 0,
    atType: 0,
    fondsId: 0,
    archiveTypeId: 0,
    level: []
  });

  /**
   * @description: 关闭添加规则弹窗，根据参数判断取消还是保存
   * @param {string} condition 添加的规则，保存时使用
   * @param {TScopeType} scope 传入的环境，用于同意参数，保存时使用
   */
  const closeExpDialog = (condition?: string) => {
    if (condition) {
      console.log({ condition });
      form.setFieldsValue({ condition });
      setAddRuleVisible(false);
    } else {
      setAddRuleVisible(false);
    }
  };

  return (
    <>
      <Form.Item name="name" label="节点名称" rules={[{ required: true }]}>
        <Input />
      </Form.Item>

      <Form.Item label="条件表单式">
        <Space>
          <Form.Item name="condition" noStyle>
            <Input disabled />
          </Form.Item>
          <Button
            type="primary"
            onClick={() => {
              setAddRuleVisible(true);
            }}
          >
            设置
          </Button>
        </Space>
      </Form.Item>
      {useMemo(
        () => (
          <ExpGeneratorDialog visible={addRuleVisible} scope={scope} onClose={closeExpDialog} />
        ),
        [addRuleVisible]
      )}
    </>
  );
};

export default DataForm;
